<template>
    <div style="height: 100%">
        <el-row style="border-bottom: 1px solid #c9c9c9" class="row-with-border">
            <el-col :span="8" style="border-right: 1px solid #c9c9c9" class="column-with-border" v-if="isZoomed === false">
                <el-card>
                    <div>
                        <el-row type="flex">
                            <el-col :span="4">
                                <b>{{ title }}</b>
                            </el-col>
                            <el-col :span="8" style="margin-right: 5px; margin-bottom: 10px">
                                <el-input placeholder="规则编码/名称" v-model="ruleIdOrName" size="mini"></el-input>
                            </el-col>
                            <el-col :span="12">
                                <el-button type="primary" @click="handleSearchClick">查询</el-button>
                                <el-button type="primary" @click="exportStopLossEvent">导出</el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="height: calc(100vh - 180px)">
                        <vxe-table
                            :data="dataSource"
                            :key="tableKey"
                            @cell-click="cellClickEvent"
                            @checkbox-change="handleSelectionChange"
                            @checkbox-all="handleSelectionChange"
                            @sort-change="handleSelectionChange2"
                            @filter-change="handleFilterChange"
                            @resizable-change="handleResizeChange"
                            :row-class-name="rowClassName"
                            v-table-top="paging.currentPage"
                            border
                            ref="xTable"
                            size="mini"
                            style="width: 100%"
                            height="100%"
                            :auto-resize="true"
                            :resizable-config="{ minWidth: '90' }"
                            :filter-config="{ remote: true }"
                            :sort-config="{ remote: true }"
                            show-header-overflow
                            :row-style="{ height: '35px' }"
                            :cell-style="{ padding: '0px' }"
                            highlight-current-row
                        >
                            <vxe-column type="checkbox" width="55" size="mini" align="center" :selectable="getSelectableModule" resizable>
                            </vxe-column>
                            <vxe-column
                                field="cRuleId"
                                title="规则编码"
                                align="center"
                                min-width="120"
                                sortable
                                :filters="[{ data: '' }]"
                                show-overflow
                                resizable
                            >
                                <template #filter="{ $panel, column }">
                                    <el-input
                                        class="my-input"
                                        type="type"
                                        v-for="(option, index) in column.filters"
                                        :key="index"
                                        v-model="option.data"
                                        @input="$panel.changeOption($event, !!option.data, option)"
                                    />
                                </template>
                            </vxe-column>
                            <vxe-column
                                field="ruleName"
                                title="规则名称"
                                min-width="120"
                                align="center"
                                sortable
                                :filters="[{ data: '' }]"
                                show-overflow
                                resizable
                            >
                                <template #filter="{ $panel, column }">
                                    <el-input
                                        class="my-input"
                                        type="type"
                                        v-for="(option, index) in column.filters"
                                        :key="index"
                                        v-model="option.data"
                                        @input="$panel.changeOption($event, !!option.data, option)"
                                    />
                                </template>
                            </vxe-column>
                            <vxe-column field="depositaryNames" title="受托人" min-width="120" show-overflow resizable align="center">
                                <template slot-scope="scope">
                                    <span>
                                        {{ scope.row.depositaryNames.length > 0 ? scope.row.depositaryNames : '--' }}
                                    </span>
                                </template>
                            </vxe-column>
                            <vxe-column field="fundCodeNames" title="触发产品" min-width="120" show-overflow sortable align="center">
                                <template slot-scope="scope">
                                    {{ scope.row.fundCodeNames.slice().sort().join(',') }}
                                </template>
                            </vxe-column>
                            <vxe-column
                                field="cStatus"
                                title="待办状态"
                                sortable
                                min-width="120"
                                show-overflow
                                align="center"
                                :filters="this.disStatus"
                                resizable
                            >
                                <template slot-scope="scope">
                                    <span :style="getStyle(scope.row.cStatus)">
                                        {{ stateEnum[scope.row['cStatus']] || '--' }}
                                    </span>
                                </template>
                            </vxe-column>
                            <vxe-column field="dCtTime" title="待办生成时间" min-width="160" show-overflow align="center" sortable resizable>
                                <template slot-scope="scope">
                                    <span> {{ dateFormatter(scope.row.dCtDate, scope.row.dCtTime) }}</span>
                                </template>
                            </vxe-column>
                        </vxe-table>
                    </div>
                </el-card>
                <div class="block" style="height: 40px">
                    <el-pagination
                        background
                        @current-change="currentChange"
                        layout="total, prev, pager, next"
                        :total="dataSource.length"
                        :page-size="paging.pageSize"
                        :current-page.sync="paging.currentPage"
                    >
                    </el-pagination>
                </div>
            </el-col>
            <el-col :span="16" style="border-right: 1px solid #c9c9c9" class="column-with-border" :class="{ container: true, zoomed: isZoomed }">
                <el-card>
                    <div>
                        <el-row type="flex" style="width: 100%">
                            <el-col :span="11">
                                <b>{{ title }}明细</b>
                            </el-col>
                            <el-col :span="6" style="margin-left: 20px; margin-right: 20px; margin-bottom: 10px">
                                <el-input placeholder="请产品编码/名称" v-model="fundCodeOrName" size="mini"></el-input>
                            </el-col>
                            <el-col :span="9">
                                <el-button type="primary" @click="detailSearchClick">查询</el-button>
                                <el-button type="primary" @click="batchProcessing">批量处理</el-button>
                                <el-button @click="zoomIn"><i class="el-icon-full-screen"></i></el-button>
                            </el-col>
                        </el-row>
                        <div style="height: calc(100vh - 180px)">
                            <vxe-table
                                :data="dataDetailSource"
                                :key="tableKey"
                                v-table-top="paging2.currentPage"
                                border
                                ref="xDeTable"
                                size="mini"
                                style="width: 100%"
                                height="100%"
                                :auto-resize="true"
                                :resizable-config="{ minWidth: '90' }"
                                :filter-config="{ remote: true }"
                                :sort-config="{ remote: true }"
                                show-header-overflow
                                :row-style="{ height: '35px' }"
                                :cell-style="{ padding: '0px' }"
                                @sort-change="handleSortChange"
                                @filter-change="handleFilterChange1"
                                @resizable-change="handleResizeChange1"
                            >
                                <vxe-column type="checkbox" width="55" size="mini" align="center" resizable> </vxe-column>
                                <vxe-column field="cStlossEventId" title="待办编号" align="center" min-width="120" show-overflow resizable>
                                </vxe-column>
                                <vxe-column
                                    field="cFundCode"
                                    title="产品代码"
                                    align="center"
                                    min-width="120"
                                    sortable
                                    :filters="[{ data: '' }]"
                                    show-overflow
                                    resizable
                                    v-show="columns.includes('cFundCode')"
                                >
                                    <!-- <template slot-scope="scope">
                                        <span>
                                            {{ scope.row.cFundCode + '(' + scope.row.fundName + ')' }}
                                        </span>
                                    </template> -->
                                    <template #filter="{ $panel, column }">
                                        <el-input
                                            class="my-input"
                                            type="type"
                                            v-for="(option, index) in column.filters"
                                            :key="index"
                                            v-model="option.data"
                                            @input="$panel.changeOption($event, !!option.data, option)"
                                        />
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="fundName"
                                    title="产品名称"
                                    min-width="120"
                                    sortable
                                    :filters="[{ data: '' }]"
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('fundName')"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{ scope.row.fundName || '--' }}
                                        </span>
                                    </template>
                                    <template #filter="{ $panel, column }">
                                        <el-input
                                            class="my-input"
                                            type="type"
                                            v-for="(option, index) in column.filters"
                                            :key="index"
                                            v-model="option.data"
                                            @input="$panel.changeOption($event, !!option.data, option)"
                                        />
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="reminderContent"
                                    title="提醒内容"
                                    min-width="120"
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('reminderContent')"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{ scope.row.reminderContent || '--' }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="entryTagNames"
                                    title="条目标签"
                                    min-width="120"
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('entryTagNames')"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{ scope.row.entryTagNames || '--' }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="depositaryName"
                                    title="受托人"
                                    min-width="120"
                                    sortable
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('depositaryName')"
                                    :filters="[{ data: '' }]"
                                >
                                    <template #filter="{ $panel, column }">
                                        <el-input
                                            class="my-input"
                                            type="type"
                                            v-for="(option, index) in column.filters"
                                            :key="index"
                                            v-model="option.data"
                                            @input="$panel.changeOption($event, !!option.data, option)"
                                        />
                                    </template>
                                    <template slot-scope="scope">
                                        <span>
                                            {{ scope.row.depositaryName || '--' }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="fundManagerName"
                                    title="投资经理"
                                    min-width="120"
                                    show-overflow
                                    align="center"
                                    sortable
                                    resizable
                                    v-show="columns.includes('fundManagerName')"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{ scope.row.fundManagerName || '--' }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="nAccuYield"
                                    title="当前产品收益率"
                                    min-width="140"
                                    show-overflow
                                    align="center"
                                    sortable
                                    resizable
                                    v-show="columns.includes('nAccuYield')"
                                >
                                    <template slot-scope="scope">
                                        <span> {{ formatNAccuYield(scope.row.nAccuYield) }} </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="intervalRangeName"
                                    title="所在止损区间"
                                    min-width="140"
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('intervalRangeName')"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{ scope.row.intervalRangeName || '--' }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    v-show="columns.includes('stopLossTriggerType')"
                                    field="stopLossTriggerType"
                                    title="触发类型"
                                    min-width="120"
                                    sortable
                                    align="center"
                                    show-overflow
                                    resizable
                                    :filters="[
                                        { label: '无', value: '0' },
                                        { label: '上升', value: '1' },
                                        { label: '下降', value: '2' },
                                        { label: '跟踪', value: '3' },
                                        { label: '恢复', value: '4' },
                                    ]"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{ ThresholdType[scope.row.stopLossTriggerType] }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="entryCode"
                                    title="触发条目编号"
                                    min-width="140"
                                    sortable
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('entryCode')"
                                >
                                </vxe-column>
                                <vxe-column
                                    field="entryName"
                                    title="触发条目风险说明"
                                    min-width="140"
                                    sortable
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('entryName')"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{ scope.row.entryName || '--' }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="thresholdType"
                                    title="触警结果"
                                    min-width="120"
                                    sortable
                                    show-overflow
                                    align="center"
                                    resizable
                                    :filters="[
                                        { label: '合规', value: '0' },
                                        { label: '警告', value: '1' },
                                        { label: '送审', value: '2' },
                                        { label: '禁止', value: '3' },
                                        { label: '错误', value: '4' },
                                    ]"
                                    v-show="columns.includes('thresholdType')"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{ triggerTypePojo[scope.row.thresholdType] || '--' }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="cNoticeTriggerType"
                                    title="提醒条目触警结果"
                                    min-width="120"
                                    sortable
                                    show-overflow
                                    align="center"
                                    resizable
                                    :filters="[
                                        { label: '合规', value: '0' },
                                        { label: '警告', value: '1' },
                                        { label: '送审', value: '2' },
                                        { label: '禁止', value: '3' },
                                        { label: '错误', value: '4' },
                                    ]"
                                    v-show="columns.includes('cNoticeTriggerType')"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{ triggerTypePojo[scope.row.cNoticeTriggerType] || '--' }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    v-show="columns.includes('cStatus')"
                                    field="cStatus"
                                    title="待办状态"
                                    sortable
                                    min-width="120"
                                    show-overflow
                                    align="center"
                                    resizable
                                    :filters="disStatusDetail"
                                >
                                    <template slot-scope="scope">
                                        <span :style="getStyle1(scope.row.cStatus)">
                                            {{ stateEnumDetail[scope.row.cStatus] || '--' }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="cEventTag"
                                    title="待办标签"
                                    min-width="120"
                                    sortable
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('cEventTag')"
                                    :filters="[
                                        { label: '紧急处理', value: '0' },
                                        { label: '延后处理', value: '1' },
                                        { label: '已完成', value: '2' },
                                    ]"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            <el-tag
                                                v-if="scope.row.cEventTag === '0' || scope.row.cEventTag === '1'"
                                                :style="getStyle2(scope.row.cEventTag)"
                                                effect="dark"
                                                size="mini"
                                            >
                                                {{ tagEnum[scope.row.cEventTag] || '--' }}
                                            </el-tag>
                                            <span v-else>
                                                {{ tagEnum[scope.row.cEventTag] || '--' }}
                                            </span>
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="cEventContent"
                                    title="待办备注"
                                    min-width="120"
                                    sortable
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('cEventContent')"
                                    :filters="[{ data: '' }]"
                                >
                                    <template #filter="{ $panel, column }">
                                        <el-input
                                            class="my-input"
                                            type="type"
                                            v-for="(option, index) in column.filters"
                                            :key="index"
                                            v-model="option.data"
                                            @input="$panel.changeOption($event, !!option.data, option)"
                                        />
                                    </template>
                                    <template slot-scope="scope">
                                        <span>
                                            {{ scope.row.cEventContent || '--' }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="tradeDate"
                                    title="数据日期"
                                    min-width="130"
                                    sortable
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('tradeDate')"
                                >
                                    <template slot-scope="scope">
                                        <span> {{ dateFormat(scope.row.tradeDate) || '--' }}</span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="dCtDate"
                                    title="计算时间"
                                    min-width="160"
                                    sortable
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('dCtDate')"
                                >
                                    <template slot-scope="scope">
                                        <span> {{ dateFormatter(scope.row.dCtDate, scope.row.dCtTime) }}</span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="cNoticeEntryCode"
                                    title="提醒条目编号"
                                    min-width="140"
                                    sortable
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('cNoticeEntryCode')"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{ scope.row.cNoticeEntryCode || '--' }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="cNoticeEntryName"
                                    title="提醒条目风险说明"
                                    min-width="140"
                                    sortable
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('cNoticeEntryName')"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{ scope.row.cNoticeEntryName || '--' }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="cNoticeThresholdValue"
                                    title="提醒条目控制值"
                                    min-width="140"
                                    sortable
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('cNoticeThresholdValue')"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{
                                                numberFormatCIB(scope.row.cNoticeThresholdValue, scope.row.unit, 'thresholdValue') +
                                                unitShow(scope.row.unit)
                                            }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="cNoticeResult"
                                    title="提醒条目计算结果值"
                                    min-width="140"
                                    sortable
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('cNoticeResult')"
                                >
                                    <template slot-scope="scope">
                                        <span>
                                            {{ numberFormatCIB(scope.row.cNoticeResult, scope.row.unit) + unitShow(scope.row.unit) }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="opUserName"
                                    title="操作人"
                                    min-width="120"
                                    sortable
                                    align="center"
                                    :filters="[{ data: '' }]"
                                    show-overflow
                                    resizable
                                    v-show="columns.includes('opUserName')"
                                >
                                    <template #filter="{ $panel, column }">
                                        <el-input
                                            class="my-input"
                                            type="type"
                                            v-for="(option, index) in column.filters"
                                            :key="index"
                                            v-model="option.data"
                                            @input="$panel.changeOption($event, !!option.data, option)"
                                        />
                                    </template>
                                    <template slot-scope="scope">
                                        <span>
                                            {{ scope.row.opUserName || '--' }}
                                        </span>
                                    </template>
                                </vxe-column>
                                <vxe-column
                                    field="dOpTime"
                                    title="操作时间"
                                    min-width="160"
                                    sortable
                                    show-overflow
                                    align="center"
                                    resizable
                                    v-show="columns.includes('dOpTime')"
                                >
                                    <template slot-scope="scope">
                                        <span> {{ dateFormatter(scope.row.dOpDate, scope.row.dOpTime) }}</span>
                                    </template>
                                </vxe-column>

                                <vxe-column title="操作" min-width="180" fixed="right">
                                    <template slot-scope="scope">
                                        <RiskIconButton
                                            type="primary"
                                            icon="el-icon-view"
                                            topTitle="查看详情"
                                            @on-click="addTabs('look', scope.row)"
                                        ></RiskIconButton>
                                        <RiskIconButton
                                            type="primary"
                                            icon="el-icon-edit"
                                            topTitle="修改"
                                            @on-click="addTabs('edit', scope.row)"
                                        ></RiskIconButton>
                                        <RiskIconButton
                                            type="primary"
                                            icon="el-icon-time"
                                            topTitle="操作记录"
                                            @on-click="addTabs('history', scope.row)"
                                        ></RiskIconButton>
                                    </template>
                                </vxe-column>
                            </vxe-table>
                        </div>
                    </div>
                </el-card>
                <div class="block" style="height: 40px">
                    <el-pagination
                        background
                        @current-change="currentChange2"
                        layout="total, prev, pager, next"
                        :total="dataDetailSource.length"
                        :page-size="paging2.pageSize"
                        :current-page.sync="paging2.currentPage"
                    >
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="backlogVisible" width="800px" class="editDialog">
            <div>
                <div style="min-height: 150px">
                    <el-divider content-position="left">所选{{ data == '1' ? '待办' : '已办' }}事项</el-divider>
                    <div>{{ backlogList.join(',') }}</div>
                </div>
                <div v-if="data == '1'">
                    <el-divider content-position="left">待办处置信息</el-divider>
                    <el-form ref="form" :model="ruleForm" label-width="100px">
                        <el-form-item label="待办标签：">
                            <el-select v-model="ruleForm.cEventTag" size="mini" clearable>
                                <el-option key="0" label="紧急处理" value="0"></el-option>
                                <el-option key="1" label="延后处理" value="1"></el-option>
                                <el-option key="2" label="已完成" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="待办备注：">
                            <el-input type="textarea" autosize placeholder="请输入内容" v-model="ruleForm.ceventContent"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="handleCancel"> 关闭 </el-button>
                <el-button size="mini" v-if="data == '1'" type="primary" @click="handleConfirm('0')">保存待办处置信息 </el-button>
                <el-button size="mini" v-if="data == '1'" type="danger" @click="handleConfirm('1')">关闭待办</el-button>
                <el-button type="danger" v-if="data == '2'" @click="handleConfirm('2')">转回待办</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Prop } from 'vue-property-decorator';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import RiskTrantable from '@/common/components/risk-trantable.vue';
import RiskTable from '@/common/components/risk-table.vue';
import { getUser } from '@/utils/user-util';
import { accMul, dateFormat, numberFormatCIB, timeFormat, unitShow } from '@/utils/tools';
import { downLoadFile } from '@/utils/request';
import { mixins } from 'vue-class-component';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import * as cluster from 'cluster';
import DictionConstUtil from '@/utils/diction-const-util';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
    totalPage?: number;
}

@Component({
    name: 'DispositionList',
    components: {
        RiskIconButton,
        RiskTrantable,
        RiskTable,
    },
})
export default class DispositionList extends mixins(RiskEmitter) {
    @Prop() data: any;
    @Prop() checkRowIndex: any;

    dateFormat = dateFormat;
    numberFormatCIB = numberFormatCIB;
    unitShow = unitShow;

    private title: string = '';
    private currentUserCode: string = getUser().userCode;
    private cStlossEventId: string = '';
    private ruleIdOrName: string = ''; // 待办事项列表模糊查询
    private fundCodeOrName: string = ''; // 待办事项明细列表模糊查询
    private dataSource: any[] = []; // 待办事项表格数据
    private rowData: any = {}; // 待办事项表格首行数据
    private dataDetailSource: any[] = []; // 待办事项明细表格数据
    private dataForm: any = {};
    private tableKey: number = 1;
    private sort: string = '';
    private sort1: string = '';
    private paging: pages = { currentPage: 1, pageSize: 19979797, totalPage: 0, total: 0 };
    private paging2: pages = { currentPage: 1, pageSize: 19979797, totalPage: 0, total: 0 };
    private isZoomed: boolean = false;
    private hoverRowIndex: number = 0;
    private iconDom: any = null; // 图标dom
    private iconDom1: any = null; // 图标dom1
    private changeIconCols: any[] = [];
    // 明细列查询
    private reminderContent: string = '';
    private cEventTag: any[] = [];
    private cNoticeTriggerGroup: any[] = [];
    private cEventContent: string = '';
    private stopLossTriggerType: any[] = [];
    private thresholdType: any[] = [];
    private opUserName: string = '';
    private depositaryName: string = '';
    private zoomIn() {
        this.isZoomed = !this.isZoomed;
        // this.dispatch('Disposition', 'zoomIn', this.isZoomed);
    }
    private cRuleId: string = '';
    private ruleName: string = '';
    private depositaryNames: string = '';
    private fundCodeNames: string = '';
    private statusGroup: any[] = this.data == 1 ? ['0', '1'] : this.data == 2 ? ['2'] : ['0', '1', '2'];
    private statusGroup1: any[] = this.data == 1 ? ['0', '1'] : this.data == 2 ? ['1'] : ['0', '1'];
    private showColumns: any[] = [
        'cFundCode',
        'reminderContent',
        'entryTagNames',
        'depositaryName',
        'fundManagerName',
        'intervalRange',
        'intervalRangeName',
        'entryCode',
        'entryName',
        'thresholdType',
        'cStatus',
        'cEventTag',
        'cEventContent',
        'cNoticeTriggerType',
        'dCtDate',
        'cNoticeEntryCode',
        'cNoticeEntryName',
        'cNoticeThresholdValue',
        'cNoticeResult',
        'opUserName',
        'dOpTime',
    ];
    private columns: any[] = [];
    private ThresholdType: any = {
        '0': '无',
        '1': '上升',
        '2': '下降',
        '3': '跟踪',
        '4': '恢复',
    }; // 触警类型
    private stateEnum: any = {
        '0': '待处理',
        '1': '处理中',
        '2': '已处理',
    }; // 处理状态
    private stateEnumDetail: any = {
        '0': '待处理',
        '1': '已处理',
    }; // 处理状态
    private tagEnum: any = {
        '0': '紧急处理',
        '1': '延后处理',
    };
    private disStatus: any[] = [];
    private disStatusDetail: any[] = [];
    public triggerTypePojo = {
        '0': '合规',
        '1': '警告',
        '2': '送审',
        '3': '禁止',
        '4': '错误',
    } as const; // 触警结果
    private tableSelection: any[] = []; // 表格勾选数据

    private stlossEventIds: any[] = []; // 【导出使用】止损事件ID

    private backlogVisible = false;

    private backlogList = [];

    private ruleForm = {
        cEventTag: '',
        ceventContent: '',
        cstlossEventId: '',
    };

    private getFiltersDetail() {
        return this.disStatus;
    }

    // 状态样式
    private getStyle(value: string): any {
        let color = '';
        color = value == '0' ? 'red' : value == '1' ? 'orange' : value == '2' ? 'green' : '';
        return { color: color };
    }
    private getStyle1(value: string): any {
        let color = '';
        color = value == '0' ? 'red' : value == '1' ? 'green' : '';
        return { color: color };
    }
    private getStyle2(value: string): any {
        let color = '';
        color = value == '0' ? 'red' : value == '1' ? 'orange' : '';
        return { backgroundColor: color };
    }

    // 时间处理
    private dateFormatter(date, time) {
        if (date || time) {
            return (date ? dateFormat(date, true) : '') + ' ' + (time ? timeFormat(time, true) : '');
        }
        return '--';
    }

    // 点击待办事项获取待办事项明细
    private cellClickEvent({ row, rowIndex }) {
        console.log(row, 'row');

        this.hoverRowIndex = rowIndex;
        this.dispatch('Disposition', 'getCheckRowIndex', rowIndex);
        this.dataForm = JSON.parse(JSON.stringify(row));
        this.cStlossEventId = row.cStlossEventId;
        if (row.columns) {
            this.columns = JSON.parse(row.columns);
        } else {
            this.columns = this.showColumns;
        }
        this.getDispositionDetailList(row.cStlossEventId);
    }
    private rowClassName({ rowIndex }) {
        if (rowIndex == this.hoverRowIndex) {
            return 'highlighted';
        }
        return '';
    }
    // 表格勾选事件
    private handleSelectionChange(val, event): void {
        // 阻止事件传播
        event.stopPropagation();
        this.tableSelection = val.selection;
        this.stlossEventIds = [];
        this.tableSelection.forEach(item => {
            this.stlossEventIds.push(item.cStlossEventId);
        });
    }
    /**
     * @description: 排序触发
     * @author: guoyunfei
     * @date: 2023/11/29 22:08:11
     */

    private handleSelectionChange2(column) {
        let { order, property } = column;

        if (order) {
            order = order.split('ending')[0];
        } else {
            order = '';
        }
        let obj = {
            cRuleId: `TO_NUMBER(REGEXP_REPLACE(C_RULE_ID,'[^0-9]',''))`,
            ruleName: 'C_RULE_NAME',
            cStatus: 'C_STATUS',
            dCtTime: 'D_CT_DATE,D_CT_TIME',
            depositaryNames: 'C_DEPOSITARY_NAME',
            fundCodeNames: 'C_FUND_CODE',
        };

        this.sort = obj[property] + ' ' + order;
        this.getDispositionList();
    }
    /**
     * @name: 名称
     * @description: 明细排序触发
     * @author: guoyunfei
     * @date: 2023/11/30 09:43:32
     */

    private handleSortChange(column) {
        let { order, property } = column;

        if (order) {
            order = order.split('ending')[0];
        } else {
            order = '';
        }
        let obj = {
            cStlossEventId: `TO_NUMBER(REGEXP_REPLACE(C_STLOSS_EVENT_ID,'[^0-9]',''))`,
            reminderContent: 'REMINDERCONTENT',
            cEventTag: 'C_EVENT_TAG',
            cEventContent: 'C_EVENT_CONTENT',
            stopLossTriggerType: 'C_STLOSS_TRIGGER_TYPE',
            thresholdType: 'C_TRIGGER_TYPE',
            cStatus: 'C_STATUS',
            cFundCode: 'C_FUND_CODE',
            fundName: 'C_FUND_NAME',
            depositaryName: 'C_DEPOSITARY_NAME',
            fundManagerName: 'C_FUND_MANAGERS',
            nAccuYield: 'N_ACCU_YIELD_YTD',
            intervalRangeName: 'INTERVAL_RANGE_NAME',
            entryCode: 'C_NOTICE_ENTRY_CODE',
            entryName: 'C_NOTICE_ENTRY_NAME',
            cNoticeTriggerType: 'C_NOTICE_TRIGGER_TYPE',
            dCtDate: 'D_CT_DATE,D_CT_TIME',
            cNoticeEntryCode: 'C_NOTICE_ENTRY_CODE',
            cNoticeEntryName: 'C_NOTICE_ENTRY_NAME',
            cNoticeThresholdValue: 'C_NOTICE_THRESHOLD_VALUE',
            cNoticeResult: 'C_NOTICE_RESULT',
            dOpTime: 'CONCAT(D_OP_DATE,D_OP_TIME)',
            opUserName: 'C_USER_NICK_NAME',
            tradeDate: 'T6.D_TRADE_DATE',
        };

        this.sort1 = obj[property] + ' ' + order;
        this.getDispositionDetailList(this.cStlossEventId);
    }
    /**
     * @name: 名称
     * @description: 过滤触发
     * @author: guoyunfei
     * @date: 2023/11/29 22:09:07
     */

    private handleFilterChange({ field, values, datas }): void {
        if (['cRuleId', 'ruleName', 'depositaryNames', 'fundCodeNames'].includes(field)) {
            this[field] = datas.join('');
        } else if (field === 'cStatus') {
            this['statusGroup'] = values;
        } else {
            this[field] = values;
        }

        this.getDispositionList();
    }
    /**
     * @name: 名称
     * @description: 明细过滤触发
     * @author: guoyunfei
     * @date: 2023/11/29 22:09:07
     */
    private handleFilterChange1({ field, values, datas }): void {
        if (['cStlossEventId', 'reminderContent', 'depositaryName', 'cEventContent', 'stopLossTriggerType', 'opUserName'].includes(field)) {
            this[field] = datas.join('');
        } else if (field === 'cFundCode' || field === 'fundName') {
            this['fundCodeOrName'] = datas.join('');
        } else if (field === 'cEventTag') {
            this['cEventTag'] = values;
        } else if (field === 'cNoticeTriggerType') {
            this['cNoticeTriggerGroup'] = values;
        } else if (field === 'thresholdType') {
            this['thresholdType'] = values;
        } else if (field === 'cStatus') {
            this['statusGroup1'] = values;
        } else {
            this[field] = values;
        }

        this.getDispositionDetailList(this.cStlossEventId);
    }

    private handleResizeChange(options: any) {
        this.$nextTick(() => {
            (this.$refs.xTable as any).resetColumn(false);
        });
    }

    private handleResizeChange1(options: any) {
        this.$nextTick(() => {
            (this.$refs.xDeTable as any).resetColumn(false);
        });
    }
    private currentChange(val): void {
        this.paging.currentPage = val;
    }
    private currentChange2(val): void {
        this.paging2.currentPage = val;
    }
    /**
     * @name: 名称
     * @description: 待办事项查询事件
     * @author: guoyunfei
     * @date: 2023/11/24 10:11:32
     */

    private handleSearchClick(): void {
        this.paging.currentPage = 1;
        this.getDispositionList();
    }

    private detailSearchClick(): void {
        this.paging.currentPage = 1;
        this.getDispositionDetailList(this.cStlossEventId);
    }

    /**
     * @name: 名称
     * @description: 待办事项导出
     * @author: guoyunfei
     * @date: 2023/11/28 16:31:39
     */

    private exportStopLossEvent() {
        let url = '/htscamc/stopLossEvent/list/export'; // 待办事项列表导出
        let data = {
            currentUserCode: '',
            ruleId: '',
            ruleIdOrName: '',
            ruleName: '',
            paging: this.paging,
            sort: this.sort,
            stlossEventIds: this.stlossEventIds,
            statusList: this.statusGroup,
        };
        /*  this.$axios({ url, method: 'post', data }).then((res: any) => {
        }); */

        downLoadFile({
            url: url,
            method: 'post',
            data: data,
        });
    }
    // 获取待办事项列表
    async getDispositionList() {
        let url = '/htscamc/stopLossEvent/list'; // 待办事项列表
        let data = {
            currentUserCode: '',
            ruleId: this.cRuleId,
            ruleIdOrName: this.ruleIdOrName,
            ruleName: this.ruleName,
            statusList: this.statusGroup,
            paging: this.paging,
            sort: this.sort,
        };
        await this.$axios({ url, method: 'post', data }).then((res: any) => {
            this.dataSource = res.list;
            this.changeTable();
            this.paging.total = res.list.length;
            this.paging.totalPage = res.totalPage;
        });
        if (this.dataSource.length > 0) {
            if (this.checkRowIndex != 0) {
                this.hoverRowIndex = this.checkRowIndex;
                this.rowData = this.dataSource[this.checkRowIndex];
            } else {
                this.rowData = this.dataSource[0];
            }
            this.dataForm = JSON.parse(JSON.stringify(this.rowData));
            if (this.rowData.columns) {
                this.columns = JSON.parse(this.rowData.columns);
            } else {
                this.columns = this.showColumns;
            }
            this.cStlossEventId = this.rowData.cStlossEventId;
            this.getDispositionDetailList(this.cStlossEventId);
        }
    }
    // 获取待办事项明细列表
    private getDispositionDetailList(cStlossEventId: string) {
        let url = '/htscamc/stopLossEvent/detail/list'; // 待办事项明细列表
        let data = {
            stlossEventId: cStlossEventId ?? this.cStlossEventId,
            fundCodeOrName: this.fundCodeOrName,
            cstlossEventDetailId: '',
            statusList: this.statusGroup1, // [待办状态：0-待处理,1-已处理]
            paging: this.paging2,
            sort: this.sort1,
            eventContent: this.cEventContent,
            eventTags: this.cEventTag,
            reminderContent: this.reminderContent,
            stopLossTriggerTypes: this.stopLossTriggerType,
            thresholdTypes: this.thresholdType,
            opUserName: this.opUserName,
            depositaryName: this.depositaryName,
            noticeThresholdTypes: this.cNoticeTriggerGroup,
        };
        this.dataDetailSource = [];
        this.$axios({ url, method: 'post', data }).then((res: any) => {
            this.dataDetailSource = res.list;
            this.changeTable1();
            this.paging2.total = res.list.length;
            this.paging2.totalPage = res.totalPage;
        });
    }

    add0(time) {
        if (time.length < 6) {
            const addLen = 6 - time.length;
            for (let i = 0; i < addLen; i++) {
                time = '0' + time;
            }
        }
        return time;
    }

    changeTable() {
        this.$nextTick(() => {
            if (!this.iconDom) {
                this.iconDom = document.querySelectorAll('.vxe-icon--funnel');
                for (let i = 0; i < this.iconDom.length; i++) {
                    if (!this.changeIconCols.includes(i)) {
                        this.iconDom[i].className = 'vxe-filter--btn el-icon-search';
                    }
                }
            }
        });
    }
    changeTable1() {
        this.$nextTick(() => {
            if (!this.iconDom1) {
                this.iconDom1 = document.querySelectorAll('.vxe-icon--funnel');
                for (let i = 0; i < this.iconDom1.length; i++) {
                    if (!this.changeIconCols.includes(i)) {
                        this.iconDom1[i].className = 'vxe-filter--btn el-icon-search';
                    }
                }
            }
        });
    }

    // 回调函数
    addTabs(data: any, val: any) {
        let datas: any = {};
        datas.type = data;
        datas.value = val;
        datas.disType = this.data;
        console.log('类型：---' + this.data);

        this.dispatch('Disposition', 'addTables', datas);
        this.dispatch('Disposition', 'getRuleInfo', this.dataForm); // 传递规则信息
    }
    async created() {
        if (this.data === 1) {
            this.title = '待办事项';
            this.disStatus = [
                { label: '待处理', value: '0' },
                { label: '处理中', value: '1' },
            ];
            this.disStatusDetail = [
                { label: '待处理', value: '0' },
                { label: '已处理', value: '1' },
            ];
        } else {
            this.title = '已办事项';
            this.disStatus = [{ label: '已处理', value: '2' }];
            this.disStatusDetail = [{ label: '已处理', value: '1' }];
        }
    }

    async mounted() {
        this.getDispositionList();
    }

    batchProcessing() {
        this.backlogList = [];
        let selectRecords = (this.$refs.xDeTable as any).getCheckboxRecords();
        if (selectRecords.length > 0) {
            this.backlogVisible = true;
            selectRecords.forEach(item => {
                this.backlogList.push(item.cStlossEventDetailId);
            });
            this.ruleForm.cstlossEventId = selectRecords[0].cStlossEventId;
        } else {
            this.yh_message_warn('请选择' + (this.data == '1' ? '待办' : '已办') + '数据！');
            return;
        }
        console.log('选中', selectRecords);
    }
    private handleConfirm(status: string) {
        if (this.ruleForm.cEventTag == '' && this.data == '1') {
            this.yh_message_warn('待办标签不能为空！');
            return;
        }
        let statusValue = status;
        if (status === '2') {
            statusValue = '0';
        }
        let url = '/htscamc/stopLossEvent/detail/update';
        let data = {
            ceventContent: this.ruleForm.ceventContent,
            ceventTag: this.ruleForm.cEventTag,
            cstatus: statusValue,
            cstlossEventId: this.ruleForm.cstlossEventId,
            stLossEventDetailIdList: this.backlogList,
        };
        if (status === '1' || status === '2') {
            this.$axios({ url, method: 'post', data })
                .then((res: any) => {
                    this.backlogVisible = false;
                    this.yh_message_success('操作成功！');
                    if (this.dataSource.length > 1) {
                        this.dispatch('Disposition', 'getCheckRowIndex', 0);
                        let row = this.dataSource[0];
                        let rowIndex = 0;
                        this.cellClickEvent({ row, rowIndex });
                    } else {
                        this.dataDetailSource = [];
                    }
                    this.getDispositionList();
                    //  if (status === '2') {
                    //     this.getDispositionDetailList('');
                    //  } else {
                    //     this.getDispositionDetailList(this.cStlossEventId);
                    //  }
                })
                .catch(() => {
                    this.backlogVisible = false;
                })
                .finally(() => {
                    this.ruleForm = {
                        cEventTag: '',
                        ceventContent: '',
                        cstlossEventId: '',
                    };
                });
        } else {
            this.$axios({ url, method: 'post', data })
                .then((res: any) => {
                    this.backlogVisible = false;
                    this.yh_message_success('操作成功！');
                    if (this.dataSource.length > 0) {
                        this.dispatch('Disposition', 'getCheckRowIndex', 0);
                        this.dataDetailSource = [];
                        let row = this.dataSource[0];
                        let rowIndex = 0;
                        this.cellClickEvent({ row, rowIndex });
                    } else {
                        this.dataDetailSource = [];
                    }
                    this.getDispositionList();
                    // if (status === '2') {
                    //     this.getDispositionDetailList('');
                    //  } else {
                    //     this.getDispositionDetailList(this.cStlossEventId);
                    //  }
                })
                .catch(() => {
                    this.backlogVisible = false;
                })
                .finally(() => {
                    this.ruleForm = {
                        cEventTag: '',
                        ceventContent: '',
                        cstlossEventId: '',
                    };
                });
        }
    }
    handleCancel() {
        this.backlogVisible = false;
        this.backlogList = [];
        this.ruleForm = {
            cEventTag: '',
            ceventContent: '',
            cstlossEventId: '',
        };
    }

    /**
     * 当前产品收益率 %展示
     */
    formatNAccuYield(val): string {
        if (val || val == 0) {
            return accMul(val, 100) + '%';
        }
        return '--';
    }
}
</script>

<style lang="scss" scoped>
.column-with-border {
    //border: 1px solid #ccc; /* 添加边框样式 */
    padding: 10px; /* 添加列之间的距离 */
}
.row-with-border {
    margin: -8px; /* 负边距用于抵消列的padding */
}
.row-with-flex {
    display: flex;
    align-items: center;
}

.column-with-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoomed {
    position: fixed;
    top: 35px;
    left: 0;
    width: 100%;
    height: 100%;
    // z-index: 9999;
}

.dropdown {
    position: absolute;
    width: 140px;
}

.dropdown-content {
    display: none;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
    padding: 5px;
}

.dropdown-content .dropdown-item {
    color: black;
    padding: 2px 5px;
    text-decoration: none;
    display: block;
}

.dropdown-content .dropdown-item:hover {
    background-color: #ddd;
}
/deep/ .highlighted {
    background-color: #e7f1f5;
}
</style>
